import React, { useState } from "react";
import { TouchableOpacity, Text, View } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import { MaterialIcons } from "@expo/vector-icons";
import { createStyles } from "./index.style";
import SharePanel from "@/components/Global/SharePanel";

// Mock数据，后续会替换为store管理
const mockGroupData = {
  id: "group123456",
  name: "技术交流群",
  // 随机选择一个头像URL
  avatar: [
    "https://randomuser.me/api/portraits/men/32.jpg",
    "https://randomuser.me/api/portraits/women/44.jpg",
    "https://randomuser.me/api/portraits/men/22.jpg",
    "https://randomuser.me/api/portraits/women/28.jpg",
  ][Math.floor(Math.random() * 4)],
  description: "这是一个技术交流群，欢迎加入讨论技术话题",
  memberCount: 56,
  owner: {
    id: "user123",
    name: "张三",
    avatar: "https://randomuser.me/api/portraits/men/1.jpg",
  },
  createTime: "2023-05-15T10:30:00Z",
};

const ShareGroup = () => {
  const { colors } = useTheme();
  const styles = createStyles(colors);
  const [sharePanelVisible, setSharePanelVisible] = useState(false);

  const handleShare = () => {
    // 显示分享面板
    setSharePanelVisible(true);
  };

  const handleCloseSharePanel = () => {
    setSharePanelVisible(false);
  };

  return (
    <>
      <TouchableOpacity style={styles.actionButton} onPress={handleShare}>
        <View style={[styles.buttonContainer, styles.shareButton]}>
          <MaterialIcons name="share" size={24} style={styles.iconColor} />
        </View>
        <Text style={styles.buttonText}>分享群聊</Text>
      </TouchableOpacity>

      {/* 分享面板 */}
      <SharePanel
        visible={sharePanelVisible}
        onClose={handleCloseSharePanel}
        type="group"
        contentId={mockGroupData.id}
        contentName={mockGroupData.name}
        contentAvatar={mockGroupData.avatar}
        contentDescription={mockGroupData.description}
      />
    </>
  );
};

export default ShareGroup;
